'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _inputNumber = require('antd/lib/input-number');

var _inputNumber2 = _interopRequireDefault(_inputNumber);

var _tooltip = require('antd/lib/tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _array = require('../array');

var _array2 = _interopRequireDefault(_array);

var _rcTweenOne = require('rc-tween-one');

var _Icon = require('./common/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _AutoComplete = require('./common/AutoComplete');

var _AutoComplete2 = _interopRequireDefault(_AutoComplete);

var _RowHelp = require('./common/RowHelp');

var _RowHelp2 = _interopRequireDefault(_RowHelp);

var _BoxModel = require('./common/BoxModel');

var _BoxModel2 = _interopRequireDefault(_BoxModel);

var _Slider = require('./common/Slider');

var _Slider2 = _interopRequireDefault(_Slider);

var _utils = require('../utils');

var _QuestionCircleOutlined = require('@ant-design/icons/QuestionCircleOutlined');

var _QuestionCircleOutlined2 = _interopRequireDefault(_QuestionCircleOutlined);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var RadioButton = _radio2['default'].Button;
var RadioGroup = _radio2['default'].Group;
var Panel = _collapse2['default'].Panel;

var EditorInterface = function (_Component) {
    (0, _inherits3['default'])(EditorInterface, _Component);

    function EditorInterface() {
        var _ref;

        var _temp, _this, _ret;

        (0, _classCallCheck3['default'])(this, EditorInterface);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = EditorInterface.__proto__ || Object.getPrototypeOf(EditorInterface)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (key, v, isDrag) {
            var value = key === 'offset' ? (0, _extends4['default'])({}, _this.props.value, v) : (0, _extends4['default'])({}, _this.props.value, (0, _defineProperty3['default'])({}, key, v));
            _this.props.onChange('interface', value, isDrag);
        }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
    }

    (0, _createClass3['default'])(EditorInterface, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                value = _props.value,
                locale = _props.locale,
                exclude = _props.exclude,
                props = (0, _objectWithoutProperties3['default'])(_props, ['value', 'locale', 'exclude']);

            var posChild = value.position !== 'static' ? _react2['default'].createElement(
                'div',
                { key: 'pos', style: { overflow: 'hidden' } },
                _react2['default'].createElement(
                    _row2['default'],
                    null,
                    _react2['default'].createElement(
                        _col2['default'],
                        null,
                        locale.position,
                        ' - top, right, bottom, left'
                    )
                ),
                _react2['default'].createElement(_BoxModel2['default'], { keys: ['top', 'right', 'bottom', 'left'],
                    value: {
                        top: value.top,
                        right: value.right,
                        bottom: value.bottom,
                        left: value.left
                    },
                    onChange: function onChange(e) {
                        _this2.onChange('offset', e);
                    }
                }),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8, style: { marginBottom: 0, marginTop: 28 } },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 4, offset: 5 },
                        'zIndex'
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 7 },
                        _react2['default'].createElement(_inputNumber2['default'], {
                            min: 0,
                            size: 'small',
                            style: { width: '100%' },
                            value: value.zIndex,
                            onChange: function onChange(e) {
                                _this2.onChange('zIndex', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(
                            _tooltip2['default'],
                            { arrowPointAtCenter: true, title: locale.zIndex },
                            _react2['default'].createElement(_QuestionCircleOutlined2['default'], null)
                        )
                    )
                )
            ) : null;
            var floatChild = value.position === 'static' || value.position === 'relative' ? _react2['default'].createElement(
                'div',
                { key: 'float', style: { overflow: 'hidden' } },
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'float', prompt: locale.float })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            RadioGroup,
                            {
                                value: value.float,
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this2.onChange('float', e.target.value);
                                }
                            },
                            Object.keys(locale.floatSelect).map(function (key) {
                                return _react2['default'].createElement(
                                    RadioButton,
                                    { value: key, key: key },
                                    _react2['default'].createElement(_Icon2['default'], { type: key === 'none' ? 'float-close' : 'float-' + key,
                                        prompt: locale.floatSelect[key] })
                                );
                            })
                        )
                    )
                ),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8, style: { marginBottom: 0 } },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'minus-circle', prompt: locale.clear })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            RadioGroup,
                            {
                                value: value.clear,
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this2.onChange('clear', e.target.value);
                                }
                            },
                            Object.keys(locale.clearSelect).map(function (key) {
                                return _react2['default'].createElement(
                                    RadioButton,
                                    { value: key, key: key },
                                    _react2['default'].createElement(_Icon2['default'], { type: key === 'none' ? 'float-close' : 'clear-' + key,
                                        prompt: locale.clearSelect[key] })
                                );
                            })
                        )
                    )
                )
            ) : null;
            return _react2['default'].createElement(
                Panel,
                (0, _extends4['default'])({}, props, { header: props.header || locale.header }),
                !_array2['default'].inArray('opacity', exclude) && _react2['default'].createElement(
                    _RowHelp2['default'],
                    {
                        title: _react2['default'].createElement(_Icon2['default'], { type: 'opacity', prompt: locale.opacity }),
                        help: locale.opacity_help
                    },
                    _react2['default'].createElement(_Slider2['default'], {
                        min: 0,
                        max: 1,
                        value: value.opacity,
                        onChange: this.onChange,
                        step: 0.01,
                        style: { margin: '6px' }
                    })
                ),
                !_array2['default'].inArray('overflow', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'overflow', prompt: locale.overflow })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            _select2['default'],
                            {
                                style: { width: '100%' },
                                value: value.overflow,
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this2.onChange('overflow', e);
                                },
                                getPopupContainer: function getPopupContainer(node) {
                                    return (0, _utils.getParentNode)(node, 'editor-list');
                                },
                                dropdownMatchSelectWidth: false,
                                dropdownClassName: 'editor-list-dropdown'
                            },
                            (0, _utils.getOption)(locale.overflowSelect, true)
                        )
                    )
                ),
                !_array2['default'].inArray('width', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'width', prompt: locale.width })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            value: value.width,
                            onChange: function onChange(e) {
                                _this2.onChange('width', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            placeholder: 'min',
                            value: value.minWidth,
                            onChange: function onChange(e) {
                                _this2.onChange('minWidth', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            placeholder: 'max',
                            value: value.maxWidth,
                            onChange: function onChange(e) {
                                _this2.onChange('maxWidth', e);
                            }
                        })
                    )
                ),
                !_array2['default'].inArray('height', exclude) && _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: 'height', prompt: locale.height })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 9 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            value: value.height,
                            onChange: function onChange(e) {
                                _this2.onChange('height', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            placeholder: 'min',
                            value: value.minHeight,
                            onChange: function onChange(e) {
                                _this2.onChange('minHeight', e);
                            }
                        })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        _react2['default'].createElement(_AutoComplete2['default'], {
                            style: { width: '100%' },
                            placeholder: 'max',
                            value: value.maxHeight,
                            onChange: function onChange(e) {
                                _this2.onChange('maxHeight', e);
                            }
                        })
                    )
                ),
                !_array2['default'].inArray('position', exclude) && _react2['default'].createElement(
                    _RowHelp2['default'],
                    {
                        title: _react2['default'].createElement(_Icon2['default'], { type: 'position', prompt: locale.position }),
                        help: locale.position_help
                    },
                    _react2['default'].createElement(
                        _select2['default'],
                        {
                            style: { width: '100%' },
                            value: value.position,
                            size: 'small',
                            onChange: function onChange(e) {
                                _this2.onChange('position', e);
                            },
                            getPopupContainer: function getPopupContainer(node) {
                                return (0, _utils.getParentNode)(node, 'editor-list');
                            },
                            dropdownMatchSelectWidth: false,
                            dropdownClassName: 'editor-list-dropdown'
                        },
                        (0, _utils.getOption)(locale.positionSelect, true)
                    )
                ),
                !_array2['default'].inArray('float', exclude) && _react2['default'].createElement(
                    _rcTweenOne.TweenOneGroup,
                    {
                        enter: { height: 0, type: 'from', duration: 300, ease: 'easeInOutCirc' },
                        leave: { height: 0, duration: 300, ease: 'easeInOutCirc' },
                        style: { overflow: 'hidden' }
                    },
                    floatChild
                ),
                !_array2['default'].inArray('float', exclude) && _react2['default'].createElement(
                    _rcTweenOne.TweenOneGroup,
                    {
                        enter: { height: 0, type: 'from', duration: 300, ease: 'easeInOutCirc' },
                        leave: { height: 0, duration: 300, ease: 'easeInOutCirc' },
                        style: { overflow: 'hidden' }
                    },
                    posChild
                )
            );
        }
    }]);
    return EditorInterface;
}(_react.Component);

EditorInterface.propTypes = {
    className: _propTypes2['default'].string,
    header: _propTypes2['default'].string,
    value: _propTypes2['default'].object,
    onChange: _propTypes2['default'].func,
    locale: _propTypes2['default'].object,
    exclude: _propTypes2['default'].array
};
EditorInterface.defaultProps = {
    exclude: [],
    className: 'editor-font',
    value: {
        overflow: 'visible',
        width: '0px',
        maxWidth: null,
        minWidth: null,
        position: 'static',
        top: null,
        right: null,
        bottom: null,
        left: null
    },
    onChange: function onChange() {}
};
exports['default'] = EditorInterface;


EditorInterface.componentName = 'EditorInterface';
module.exports = exports['default'];